import {
  Button,
  Card,
  Row,
  Space,
  Table,
  Tag,
  Switch,
  message,
  Modal,
} from 'antd'
import { PageTools } from '@/components/PageTools'
import styles from './index.module.scss'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { delEmp, getList } from '@/store/actions/Employees'
import avatar from '@/assets/nopicture.png'
import dayjs from 'dayjs'
import AddEmployee from '@/components/AddEmployee'
import { useHistory } from 'react-router-dom'
const Employees = () => {
  const dispatch = useDispatch()
  const data = useSelector((state) => state.Employees)
  useEffect(() => {
    const params = { page: data.current, size: data.pageSize }
    dispatch(getList(params))
  }, [])
  const history = useHistory()

  //用来控制新增员工的模态框
  const [open, setOpen] = useState(false)

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) =>
        (data.current - 1) * data.pageSize + index + 1,
    },
    { title: '姓名', dataIndex: 'username' },
    {
      title: '头像',
      dataIndex: 'staffPhoto',
      render: (text) => {
        return (
          <img
            src={text.trim() ? text : avatar}
            width="100px"
            height="100px"
            onError={(e) => {
              e.target.src = avatar
            }}
          />
        )
      },
    },
    { title: '工号', dataIndex: 'workNumber' },
    {
      title: '聘用形式',
      dataIndex: 'formOfEmployment',
      render: (text) => {
        if (!text) return '未知'
        return text === '1' ? '正式' : '非正式'
      },
    },
    { title: '部门', dataIndex: 'departmentName' },
    {
      title: '入职日期',
      dataIndex: 'timeOfEntry',
      width: '120px',
      render: (text) => dayjs(text).format('YYYY-MM-DD'),
    },
    {
      title: '账户状态',
      dataIndex: 'enableState',
      render: (text) => {
        return <Switch defaultChecked={text === 1 ? true : false} />
      },
    },
    {
      title: '操作',
      width: '300px',
      render: (text) => {
        return (
          <div style={{ color: 'skyblue' }}>
            <Button type="text" size="small" className="blue">
              查看
            </Button>
            <Button type="text" size="small" className="blue">
              转正
            </Button>
            <Button type="text" size="small" className="blue">
              调岗
            </Button>
            <Button type="text" size="small" className="blue">
              离职
            </Button>
            <Button type="text" size="small" className="blue">
              角色
            </Button>
            <Button
              type="text"
              size="small"
              onClick={() => {
                Modal.confirm({
                  content: `是否要删除${text.username}?`,
                  onOk: () => {
                    const handle = async () => {
                      await dispatch(delEmp(text.id))
                      await dispatch(
                        getList({ page: data.current, size: data.pageSize })
                      )
                      message.success('操作成功')
                    }
                    handle()
                  },
                })
              }}
            >
              删除
            </Button>
          </div>
        )
      },
    },
  ]

  const addEmp = () => {
    setOpen(true)
  }

  // const onChange = (pagination, filters, sorter, extra) => {
  //   console.log('params', pagination, filters, sorter, extra)
  // }
  return (
    <div className={styles.root}>
      <PageTools
        before={
          <Tag
            color="cyan"
            style={{ height: '30px', lineHeight: '30px', fontSize: '14px' }}
          >
            共{data.total}条记录
          </Tag>
        }
        after={
          <Space>
            <Button
              className="button_in"
              onClick={() => {
                history.push('/home/employees/import')
              }}
            >
              导入
            </Button>
            <Button className="button_out">导出</Button>
            <Button className="button_add" onClick={addEmp}>
              新增员工
            </Button>
          </Space>
        }
      />
      <Card>
        <Table
          columns={columns}
          dataSource={data.rows}
          // onChange={onChange}
          rowKey="id"
          pagination={{
            current: data.current,
            pageSize: data.pageSize,
            total: data.total,
            onChange: (page, pageSize) => {
              dispatch(getList({ page, size: pageSize }))
            },
          }}
        />
        {/*  */}
      </Card>
      <AddEmployee open={open} setOpen={setOpen}></AddEmployee>
    </div>
  )
}

export default Employees
